<template>
  <div class="regulatory-page">
    <div class="return" @click="goBack">
      <Icon size="25" color="#000000" name="arrow-left" class="back" />
      <div class="title">
        <p class="text">个人信息</p>
      </div>
    </div>
    <div class="avatar">
      <VanImage
          round
          width="5rem"
          height="5rem"
          :src="require('@/assets/backgrounds/user.jpg')"
      />
    </div>
    <div class="common-container" @click="showPopup('username')">
      <div class="left-section">
        <p>用户名</p>
        <p class="center-section-a">{{ user.username || '未设置' }}</p>
      </div>
      <div class="arrow">
        <Icon size="15" color="#808080" name="arrow" />
      </div>
    </div>
    <div class="common-container" @click="showPopup('nickname')">
      <div class="left-section">
        <p>昵称</p>
        <p class="center-section-b">{{ user.nickname || '快来取个名吧' }}</p>
      </div>
      <div class="arrow">
        <Icon size="15" color="#808080" name="arrow" />
      </div>
    </div>
    <div class="common-container" @click="showPopup('introduction')">
      <div class="left-section">
        <p>自我介绍</p>
        <p class="center-section-c">{{ user.introduction || '介绍下自己吧' }}</p>
      </div>
      <div class="arrow">
        <Icon size="15" color="#808080" name="arrow" />
      </div>
    </div>
    <div class="common-container" @click="showSexPopup">
      <div class="left-section">
        <p>性别</p>
        <p class="center-section-b">{{ user.sex || '未知' }}</p>
      </div>
      <div class="arrow">
        <Icon size="15" color="#808080" name="arrow" />
      </div>
    </div>
    <div class="common-container" @click="showPopup('age')">
      <div class="left-section">
        <p>年龄</p>
        <p class="center-section-b">{{ user.age || '未设置' }}</p>
      </div>
      <div class="arrow">
        <Icon size="15" color="#808080" name="arrow" />
      </div>
    </div>
    <Popup v-model="show" position="center" :style="{ height: '30%', borderRadius: '10px' }" closeable>
      <div class="popup-content">
        <form @submit.prevent="updateUser">
          <div v-if="popupField === 'username'">
            <p class="label">用户名</p>
            <input class="input-container" v-model="tempUser.username" type="text" />
          </div>
          <div v-if="popupField === 'nickname'">
            <p class="label">昵称</p>
            <input  class="input-container" v-model="tempUser.nickname" type="text" />
          </div>
          <div v-if="popupField === 'introduction'">
            <p class="label">自我介绍</p>
            <input class="input-container" v-model="tempUser.introduction" type="text" />
          </div>
          <div v-if="popupField === 'age'">
            <p class="label">年龄</p>
            <input class="input-container" v-model="tempUser.age" type="number" />
          </div>
          <Button round block native-type="submit" class="save-button">保存</Button>
        </form>
      </div>
    </Popup>
    <Popup v-model="showSex" position="bottom" :style="{ height: '30%'}">
      <van-picker
          :columns="sexOptions"
          show-toolbar
          @confirm="onConfirmSex"
          @cancel="onCancelSex"
      />
    </Popup>
  </div>
</template>

<script>
import { Button, Icon, Image as VanImage, Popup, Toast, Picker as VanPicker } from "vant";
import http from "@/plugins/http";

export default {
  name: "UserView",
  components: { Button, Icon, VanImage, Popup, VanPicker },
  data() {
    return {
      user: {
        username: "",
        nickname: "",
        introduction: "",
        sex: "",
        age: ""
      },
      tempUser: {},
      show: false,
      showSex: false,
      popupField: "",
      sexOptions: ["男", "女", "未知"]
    };
  },
  methods: {
    showPopup(field) {
      this.popupField = field;
      this.tempUser = { ...this.user }; // 创建用户对象的副本
      this.show = true;
    },
    showSexPopup() {
      this.tempUser = { ...this.user }; // 创建用户对象的副本
      this.showSex = true;
    },
    goBack() {
      this.$router.go(-1);
    },
    fetchUserData() {
      const storedUser = JSON.parse(sessionStorage.getItem("username"));
      if (storedUser) {
        http.get(`/user/getUserInfo/${storedUser}`)
            .then(response => {
              const userData = response.data;
              if (userData) {
                this.user = {
                  username: userData.username || "",
                  nickname: userData.nickname || "",
                  introduction: userData.introduction || "",
                  sex: userData.sex || "",
                  age: userData.age || ""
                };
              } else {
                console.error("用户信息数据为空");
              }
            })
            .catch(error => {
              console.error("获取用户信息出错:", error);
            });
      } else {
        console.error("没有用户登录");
      }
    },
    updateUser() {
      http.post(`/user/updateUser`, this.tempUser)
          .then(response => {
            if (response.statusCode === "200") {
              this.user = { ...this.tempUser };
              this.show = false;
              Toast.success('保存成功');
            } else {
              Toast.fail('更新用户信息失败');
              console.error("更新用户信息失败:", response.message);
            }
          })
          .catch(error => {
            Toast.fail('更新用户信息出错');
            console.error("更新用户信息出错:", error);
          });
    },
    updateSex() {
      this.user.sex = this.tempUser.sex;
      this.showSex = false;
      this.updateUser();
    },
    onConfirmSex(value) {
      this.tempUser.sex = value;
      this.updateSex();
    },
    onCancelSex() {
      this.showSex = false;
    }
  },
  created() {
    this.fetchUserData();
  }
};
</script>

<style scoped>
.regulatory-page {
  background-color: #f6f7f9;
  height: 100vh;
}
.return {
  background-color: #faeaea;
  padding: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.back {
  position: absolute;
  left: 10px;
  text-decoration: none;
}
.text {
  margin: 0;
  color: #000000;
  font-size: 16px;
}
.title {
  display: flex;
  align-items: center;
}
.avatar {
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;
  justify-content: center;
  background-color: #ffffff;
  border-bottom: 0.5px solid #e0e0e0;
}
.common-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  padding: 12px 15px;
  border-bottom: 0.5px solid #e0e0e0;
  cursor: pointer;
}
.left-section {
  display: flex;
  align-items: center;
}
.arrow {
  display: flex;
  align-items: center;
}
.center-section-a {
  margin-left: 60px;
  color: #686868;
}
.center-section-b {
  margin-left: 75px;
  color: #686868;
}
.center-section-c {
  margin-left: 42px;
  color: #686868;
}
.popup-content {
  padding: 20px;
}
.save-button {
  margin-top: 10px;
  color: #ffffff;
  background: linear-gradient(to right, #FF8901, #FF4C06);
}
.input-container {
  border-radius: 20px;
  height: 40px;
  border: 2px solid #FA6408;
  margin-bottom: 10px;
  font-size: 13px;
}
.label {
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
  margin-top: 10px;
}
</style>
